iT邦幫忙

2021 iThome 鐵人賽

DAY 9
1
Modern Web

All In One NFT Website Development系列 第 9

Day 9【錢包登入區 - Login Interface】你也想起舞嗎?

  • 分享至 

  • xImage
  •  

【前言】
一如往常先來回顧一下 Day2 Project 分析的使用者流程。今天來做登入頁面,第三步的**「登入介面」,還有第四步的「登入成功畫面」**!因為之前學習前端三巨頭還有 React 的課後練習就已經是拿這個部分來實作了,所以今天應該會比較輕鬆吧,對吧…希望是如此。

【(使用者看見的)前端與(後方運作的)後端】

  1. 使用者會看見登入錢包按鈕(按鈕應該要有一些特效)
    • 按下按鈕後要連到 MetaMask 系統
  2. 使用者點擊按鈕後出現 Loading 特效,同時跳出 Metamask 登入及連動同意
    • 同意後,要從 MetaMask 得到當前登入者的以太坊地址
  3. 使用者同意後出現登入介面,讓其輸入欲登入的角色編號
    • 得到欲登入的角色編號後,去後方資料庫查詢此地址是否真的擁有此 NFT
      // 資料庫建構的部分由其他夥伴負責,這邊我負責檢查 Tokens 的持有地址
  4. 成功登入後的畫面
    // 網頁互動的部分由其他夥伴負責,這邊我負責顯示登入成功 or 失敗

【登入介面】
延續上次的恐龍登入介面:
先來加個背景動畫,這個背景把一個漸層背景圖放得很大,並且藉由移動背景圖的位置來製造變色的效果,如果把時間拉得長一點還會有呼吸燈的效果。

import styled from "styled-components";

export const Wrapper = styled.section`
  ...
  background: linear-gradient(#141e30, #243b55);
	...
  display: flex;
  background-size: 1000% 1000%;
  animation: gradient 10s ease infinite;

  @keyframes gradient { 
    0%{background-position:0% 0%}
    50%{background-position:100% 100%}
    100%{background-position:0% 0%}
  }
`;

按下去 Enter 之後,進入 Loading 頁面!這邊我使用的是 react-text-transition 這個套件來製作文字轉換的效果,裡面有很多常用的動畫可以使用。首先下載套件:

npm install -S react-text-transition

製造陣列儲存想要呈現的文字方塊。

const TEXTS = [
  "Good morning! Ladies and gentlemen,",
  "Welcome aboard 「Dino Spaceline」 flight 「7721」",
  "We expect Landing at 「Dino Club Airport」...",
  "Please remain seated until the Fasten Seat Belt sign turned off,",
  "and check around your seat for any personal belongings.",
  "We hope you enjoy the flight! Thank you!"
];

const paragraphs = [
  "The number of the DINO Design.Team is 3 and Dev.Team is 4.",
  "The Currency circulated here is DINO Coin.",
  "There are still lots of alive DINO that haven’t been discovered by human on Earth yet.",
  "DINO weekly magazine comes off the press once a week."
];

首先從 react-text-transition import 需要的物件。並且在 export function 裡面初始化 state。如果不想使用 React.useState 也可以在一開始 import useState 這個 FUNCTION from React。

import TextTransition, { presets } from "react-text-transition";

export function LoaderTEXT(props) {
  const [index1, setIndex1] = React.useState(0);
  const [index2, setIndex2] = React.useState(0);
  ...
  return (
    ...
  );
}

使用 useEffect() 來設定時間間隔,藉每經過一段時間就對陣列 index += 1 來更換當前呈現的文字。

export function LoaderTEXT(props) {
  ...
  React.useEffect(() => {
    const intervalId1 = setInterval(() =>
      setIndex1(index1 => index1 + 1),
      3000
    );
    const intervalId2 = setInterval(() =>
      setIndex2(index2 => index2 + 1),
      5000
    );

    return () => {
      clearTimeout(intervalId1)
      clearTimeout(intervalId2)};
		 }, []);
  return (
    ...
  );
}

裡用 TextTransition 來呈現陣列裡面的文字,除了可以更改內容、動畫,還可以對 CSS 進行修改。

export function LoaderTEXT(props) {
  ...
  return (
    <Box>
      <h1>
        <TextTransition
          text={ TEXTS[index1 % TEXTS.length] }
          springConfig={ presets.wobbly }
          style={{
            "color": "white", 
            "text-shadow": "0 0 20px #00b3ff"}} />
      </h1>
      <div>
        <Head>Do you know?</Head>
        <TextTransition
          text={ paragraphs[index2 % paragraphs.length]}
          springConfig={presets.gentle}
          overflow
          style={{ "color": "white" }} />
      </div>
    </Box>
  );
}

【登入成功畫面】
持有驗證完畢之後會顯示「Verified Successfully!」字樣,這裡一樣先初始化 useState() 的使用以及以 useEffect() 設定呈現的時間間隔。

export function VIP(props) {
  const [isPending, setIsPending] = useState(true);
  const [isVering, setIsVering] = useState(false);

  useEffect(() => {
    setTimeout(() => {
      setIsPending(false);
      setIsVering(true);
    }, 18000);
  }, [])

  useEffect(() => {
    setTimeout(() => {
      setIsVering(false);
    }, 21000);
  }, [])

  return (
    ...
  );
}

要注意的有幾點,首先是 isVering 因為是「Verified Successfully!」字樣,而在 Loading 特效時我們是不會出現驗證成功的,所以一開始要初始化為 False。再來是在一定的時間且 isPendingfalse 時把 IsVering 應改為 true 來呈現正確的結果。

return 之中我使用三元運算子 condition ? exprIfTrue : exprIfFalse 來決定當前呈現的物件。

export function VIP(props) {
  ...

  return (
    <Wrapper>
      { isPending && <LoaderTEXT /> }
      { (!isPending && isVering)
				?
          <VerifiedSuc>Verified Successfully!</VerifiedSuc>
        :
          ...
      }
    </Wrapper>
  );
}

【小結】
Project 的難度越來越高了,不過目前算是暫時結束前端囉。感覺自己目前的表現還算可圈可點,只是很多想做的事情因為對 React 不熟悉所以沒辦法實作,像是我搞了很久的思考怎麼在 JavsScript 的匿名函式裡面 return 多個回傳值或物件。希望之後我可以繼續精進前端的部分。明天開始就要進入 MetaMask 以及 Ethereum 的懷抱啦!雖然還是會使用到大量的 React 不過不能畏懼,要繼續加油!

【參考資料】
react-text-transition
9+ Free React Templates - Material-UI
Animation - React.js Examples
20 Fun Dinosaur Facts for Kids
How is () => {...} different from () =>


上一篇
Day 8【錢包登入區 - Loading Message】阿嬤為什麼妳有感覺?
下一篇
Day 10【連動 MetaMask - Login Flow & Extension Check】The strongest password ever.
系列文
All In One NFT Website Development32
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言